import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";

const Comp = (props: any) => {
    const { data } = props;
    
    const barData: any = {
        yAxis: [],
        todayData: [],
        yesterdayData: [],
    };

    data.map((item: any) => {
        barData.yAxis.push(item.name);
        barData.todayData.push(item.today_count);
        barData.yesterdayData.push(item.yesterday_count);
    });

    let option: echarts.EChartsOption = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        legend: {},
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
        },
        yAxis: {
            type: "category",
            data: barData["yAxis"],
        },
        series: [{
            name: "今天",
            type: "bar",
            data: barData.todayData,
            itemStyle: {
            color: "#5087ec",
            },
        },
        {
            name: "昨天",
            type: "bar",
            data: barData.yesterdayData,
            itemStyle: {
            color: "#68bbc4",
            },
        }],
    };

    const [echartsRef] = useEcharts(option);

    return (
        <div className="sale-columns-chart">
            <h4 className="sale-title">员工销售概况</h4>
            {
                data.length ? <div ref={echartsRef} style={{ height: '600px', padding: '0 12px' }} /> : '暂无'
            }
        </div>
    );
};

export default Comp;
